<template>
  <diyAutoVue
    v-model="state"
    ref="aaa"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
  >
    <template slot-scope="{ item }">
      <div class="item">
        <div class="header">
          <span>{{ item.pnNumber }}</span>
          <p>
            申请日:<span>{{ item.date }}</span>
          </p>
        </div>
        <p>{{ item.content }}</p>
      </div>
    </template>
  </diyAutoVue>
</template>
<script>
import diyAutoVue from './diy_auto.vue';
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      timeout: null,
    };
  },
  components:{
    diyAutoVue
  },
  methods: {
    loadAll() {
      return [
        {
          pnNumber: "CN307180451S",
          date: "2010.04.22",
          content:
            "一种具有预定性能的不确定非线性系统的事件触发固定时间模糊控制方法一种具有预定性能的不确定非线性系统的事件触发固定时间模糊控制方法",
        },
      ];
    },
    async querySearchAsync(queryString, cb) {
      let res = await this.getData(queryString);
      cb(res);
    },
    handleSelect(item) {
      this.$message.warning("buxing");
      this.$refs.aaa.controlClose();
      // this.state = item.pnNumber
      // console.log(item);
    },
    async getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(this.restaurants);
        }, 300);
      });
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>
<style scoped lang="less">
.item {
  .header {
    display: flex;
    span {
      font-weight: 600;
      font-size: 12px;
      color: #1c4cba;
      line-height: 20px;
    }
    p {
      margin-left: 18px;
      font-size: 12px;
      color: #a3a3a3;
      line-height: 20px;
      span {
        color: #181818;
      }
    }
  }
}
</style>
